import { HolderOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { useMemo, useState } from 'react';

import type { YmDataNode } from 'ym-design';
import { YmTree } from 'ym-design';

const DEFAULTTREEDATA: YmDataNode[] = [
  {
    key: '0',
    title: 'parent 0',
    children: [
      {
        key: '0-0',
        title: 'parent 0-0',
        children: [{ key: '0-0-0', title: 'leaf 0-0-0' }],
      },
      {
        key: '0-1',
        title: 'parent 0-1',
        children: [
          { key: '0-1-0', title: 'leaf 0-1-0', disableCheckbox: true },
          { key: '0-1-1', title: 'leaf 0-1-1 disableDrag' },
          { key: '0-1-2', title: 'leaf 0-1-2 disableDrop' },
          { key: '0-1-3', title: 'leaf 0-1-3' },
          { key: '0-1-4', title: 'leaf 0-1-4' },
        ],
      },
    ],
  },
];

function YmTreeShowLine() {
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  const [treeData, setTreeData] = useState<YmDataNode[]>(DEFAULTTREEDATA);

  const handleDrop = ({ event, node, dragNode }: any) => {
    const dropKey = node.key;
    const dragKey = dragNode.key;

    const loop = (data: YmDataNode[], key: string, callback: Function) => {
      data.forEach((item, index, arr) => {
        if (item.key === key) {
          callback(item, index, arr);
          return;
        }
        if (item.children) {
          loop(item.children, key, callback);
        }
      });
    };

    const data = [...treeData];

    // Find dragObject
    let dragObj: YmDataNode;
    loop(
      data,
      dragKey,
      (item: YmDataNode, index: number, arr: YmDataNode[]) => {
        dragObj = item;
        arr.splice(index, 1);
      },
    );

    loop(
      data,
      dropKey,
      (item: YmDataNode, index: number, arr: YmDataNode[]) => {
        arr.splice(index + 1, 0, dragObj);
      },
    );

    console.log('--YmTreePage--onDrop--data--:', data);

    setTreeData([...data]);
  };

  const handleDragEnd = ({ event, node, dragNode }: any) => {
    console.log('--YmTreePage--handleDragEnd--');
  };

  const dragableConfig = useMemo(() => {
    return {
      icon: <HolderOutlined />,
      nodeDraggable: (node: YmDataNode) => {
        return node.key === '0-1-1' ? false : true;
      },
    };
  }, []);

  return (
    <div className="tree-page">
      <div style={{ marginBottom: '30px' }}>
        <p>1.autoExpandParent的优先级比 defaultExpendParent（默认true）高</p>
        <p>2.draggable.icon 不设置，就不会有拖拽icon</p>
      </div>
      <YmTree
        autoExpandParent={autoExpandParent}
        showLine
        treeData={treeData}
        defaultExpandedKeys={['0-1-1']}
        draggable={dragableConfig}
        cannotDrop={(node: YmDataNode) => {
          return node.key === '0-1-2' ? true : false;
        }}
        onDrop={handleDrop}
        onDragEnd={handleDragEnd}
      />
      <Button
        onClick={() => {
          setAutoExpandParent(!autoExpandParent);
        }}
      >
        切换autoExpandParent -- {`${autoExpandParent}`}
      </Button>
    </div>
  );
}

export default YmTreeShowLine;
